<template>
	<div class="login">
		<el-image class="login-img" :src="imagUrl" fit="cover"></el-image>
		<div class="login-main">
			<div class="login-title">边缘网关计算后台</div>
			<el-form label-position="top" label-width="auto" ref="formRef" size="large" :model="formData" :rules="fromRules" style="width: 100%">
				<el-form-item label="账号" prop="username">
					<el-input style="width: 100%" placeholder="请输入" clearable maxlength="20" v-model.number="formData.username" />
				</el-form-item>
				<el-form-item label="密码" prop="password">
					<el-input style="width: 100%" type="password" show-password placeholder="请输入" clearable maxlength="20" v-model="formData.password" />
				</el-form-item>

				<div class="login-btn">
					<el-button type="primary" @click="loginBtn" style="width: 100%">登录</el-button>
				</div>
				<div class="login-check">
					<el-checkbox v-model="isChecked" size="large" @change="checkedChange">记住密码</el-checkbox>
				</div>
			</el-form>
		</div>
	</div>
</template>

<script setup>
import { ref, reactive, getCurrentInstance, onMounted } from "vue";
import { useRouter } from "vue-router";
const { proxy } = getCurrentInstance();
const router = useRouter();
import imagUrl from "@/assets/images/loginBg.png";
import { ElMessage } from "element-plus";

const isChecked = ref(false);
const formRef = ref(null);
const formData = ref({});
const fromRules = reactive({
	username: [
		{
			required: true,
			message: "请输入账号",
			trigger: "blur",
		},
	],
	password: [
		{
			required: true,
			message: "请输入密码",
			trigger: "blur",
		},
	],
});
// 记住密码
const checkedChange = () => {
	let obj = {
		username: formData.value.username,
		password: formData.value.password,
		isChecked: isChecked.value,
	};
	if (isChecked.value) {
		let adminData = JSON.stringify(obj);
		proxy._storage.LStorage.set("adminData", adminData);
	} else {
		proxy._storage.LStorage.remove("adminData");
	}
};
const loginBtn = async (type) => {
	if (!formRef.value) return;
	await formRef.value.validate((valid, fields) => {
		if (valid) {
			 proxy
        ._http({
          url: "/api/login",
          type: "post",
          isBody: true,
          data: {
			  username: formData.value.username,
			  password: formData.value.password,
		  },
        })
        .then((res) => {
			console.log("登录",res);
			if(res.data == "ok")
			{
				checkedChange();
				proxy._storage.SStorage.set("authorization", Math.random());
				router.push("/homePage");	
			}else
			{
				ElMessage.error(res.data);
			}
			
		})
			//loginRequest();
		}
	});
};
const loginRequest = () => {
	if(formData.value.username != 'admin'){
		ElMessage.error('账号错误');
		return
	}
	if(formData.value.password != 'csin@2024'){
		ElMessage.error('密码错误');
		return
	}
	
};
onMounted(() => {
	getAdminData();
});
// 获取本地储存的账户
const getAdminData = () => {
	let adm = proxy._storage.LStorage.get("adminData");
	if (adm) {
		try {
			let adminData = JSON.parse(adm);
			formData.value.username = adminData.username;
			formData.value.password = adminData.password;
			isChecked.value = adminData.isChecked;
		} catch (e) {}
	}
};
</script>

<style lang="scss">
.login {
	position: relative;
	width: 100%;
	height: 100vh;
	overflow: hidden;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	padding: 94px 0;
	justify-content: center;
	background-color: #e4f0feff;
	.login-img {
		position: absolute;
		left: 0;
		top: 50%;
		transform: translateY(-50%);
		width: 80%;
		height: 80%;
	}
	.login-main {
		min-width: 300px;
		position: absolute;
		right: 210px;
		top: 50%;
		transform: translateY(-50%);
		display: flex;
		background-color: white;
		flex-direction: column;
		align-items: center;
		border-radius: 8px;
		padding: 24px 38px;
		box-shadow: var(--el-box-shadow-dark);
		border-radius: 5px;
		.login-title {
			font-size: 24px;
			font-weight: bold;
			margin-bottom: 36px;
		}
		.login-name {
			font-size: 16px;
			margin: 10px 0 30px;
		}
		.login-check {
			display: flex;
			align-items: center;
		}
		.login-btn {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-top: 50px;
		}
	}
}
</style>
